import {Component, Input, Output, EventEmitter } from '@angular/core';
import {Http, RequestOptions, URLSearchParams, Response} from '@angular/http'
import {PAGINATION_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
import {LocationDragItem,RouteDragItem} from './models';


@Component({
	selector: 'route-menu',
	directives: [PAGINATION_DIRECTIVES],
	inputs: ['pageSize', 'header', 'locArray', 'totalItems', 'subArray'],
	// outputs: ['itemdblclick'],
	template: `
	  <div class="treenav treenav-gray panel">
	    <ul class="nav"  style="height:190px;background-color:#393e44">
	      <li class=".navbar-inverse">
	        <div [ngStyle]="{'background-color':'#8A8B8D','color':'white'}" class="tree-toggler nav-header" [ngClass]="{active: isActive}" (click)="togglerClass()">
	          {{header}}
	        </div>
	        <ul class="nav tree">
	          <li *ngFor="let loc of subArray" (dblclick)="itemdblclick(loc.routeKey,loc.name)" [ngStyle]="{'background-color':'#393e44','color':'white'}"  class="draggable"><a class="{{header+'_'+(loc.locationKey||loc.routeKey)}}" href="#">{{loc.workstation||loc.name}}</a></li>
	        </ul>
	      </li>
	    </ul>
	    <pager [totalItems]="totalItems" [(ngModel)]="currentPage" [itemsPerPage]="pageSize"  (pageChanged)="pageChanged($event)"></pager>
	  </div>
	`
	//templateUrl:'../carousel-demo.html'
})
export class RouteMenuComponent {
	public totalItems: number;
	public currentPage: number = 1;
	public pageSize: number;
	public header: any;
	public locArray: Array<any>;
	public subArray: Array<any>;

	constructor(public http:Http){

	}

	public itemdblclick(routeKey:any,arg:any){
		if (arg) {
			let opts: RequestOptions = new RequestOptions();
			let params: URLSearchParams = new URLSearchParams();
			params.set("routeKey", routeKey);
			params.set("routeName", arg);
			opts.search = params;
			this.http.get('../searchRouteStep', opts).subscribe(
				(res: Response) => {
					console.log(res.json());
					return res.json();
				}
			);
		}
	}

	private isActive: boolean = true;


	public pageChanged(event: any): void {
		this.subArray = this.locArray.slice(this.pageSize * (event.page - 1), this.pageSize * (event.page - 1) + this.pageSize);
	};

	private togglerClass(): void {
		this.isActive = !this.isActive;
	}

}
